<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./layui/jquery.js"></script>
</head>
<body>
    <div>
        <ul class="layui-timeline" id="table_body">
            <!--<li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月18日</h3>
                    <p>
                        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                    </p>
                    <h4>作者：汤唯</h4>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月16日</h3>
                    <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                    <br>90后小伙田小浪因看到一则从上海到广州的公交线路图，产生了坐公共交通去旅行的想法。
                    <br>目前，田小浪十几天里已坐了六七百站，已经到达福建漳州。
                    <h4>作者：汤唯</h4>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月15日</h3>
                    <p>
                        中国人民抗日战争胜利72周年
                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                        <br>铭记、感恩
                        <br>所有为中华民族浴血奋战的英雄将士
                        <br>永垂不朽
                    </p>
                    <h4>作者：汤唯</h4>
                </div>
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>-->
        </ul>
    </div>
</body>
</html>
<script>
    window.onload = function() {
        $.ajax({
            url: "deal.php?model=articleShow",
            type: "POST",
            data: {},
            dataType: "json",
            success: function (res) {
                //console.log(res);
                if (res.code == 1) {
                    for (attr in res.data) {
                        createLi(res.data[attr]);
                    }

                } else {
                    alert(101);
                }
            }
        });
        function createLi(data){
            console.log(data);
            var html = '<li class="layui-timeline-item">';
            html += '<i class="layui-icon layui-timeline-axis"></i>';
            html += '<div class="layui-timeline-content layui-text">';
            html += '<h3 class="layui-timeline-title">';
            html += data.create_at;
            html += "</h3>";
            html += "<h4 ><strong>" + data.title + "</strong></h4>";
            html += "<br>";
            html += "<p>" + data.content + "</p>";
            html += "<h4>" + data.author + "</h4>";
            html += "</div></li>";
            console.log(html);
            $("#table_body").append(html);
        }
    }


    /*console.log(data);
    var html = "<li class='layui-timeline-item'>";
    html += "<i class='layui-icon layui-timeline-axis'></i>";
    html += "<div class='layui-timeline-content layui-text'>";
    html += "<h3 class='layui-timeline-title>" + data.create_at + "</h3>";
    html += "<h4 ><strong>" + data.title + "</strong></h4>";
    html += "<br>";
    html += "<p>" + data.content + "</p>";
    html += "<h4>" + data.author + "</h4>";
    html += "</div></li>";
    $("#table_body").append(html);*/
</script>